<g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
</g:if>
<g:hasErrors bean="${jobItemInstance}">
    <div class="errors">
        <g:renderErrors bean="${jobItemInstance}" as="list"/>
    </div>
</g:hasErrors>
<g:form action="save" method="post">
    <div class="dialog">
        <table>
            <tbody>

            <tr class="prop">
                <td valign="top" class="name">
                    <label for="job"><g:message code="jobitem.table.job"/>:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: jobItemInstance, field: 'job', 'errors')}">
                    <g:select optionKey="id" from="${Job.get(jobItemInstance?.job?.id)}" name="job.id" value="${jobItemInstance?.job?.id}"></g:select>
                </td>
            </tr>

            <tr class="prop">
                <td valign="top" class="name">
                    <label for="price"><g:message code="jobitem.table.price"/>:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: jobItemInstance, field: 'price', 'errors')}">
                    <input type="text" id="price" name="price" value="${fieldValue(bean: jobItemInstance, field: 'price')}"
                            onchange="calculateValue();"/>
                </td>
            </tr>

            <tr class="prop">
                <td valign="top" class="name">
                    <label for="product"><g:message code="jobitem.table.product"/>:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: jobItemInstance, field: 'product', 'errors')}">
                    <g:if test="${jobItemInstance.id == null}">
                    %{--<g:select optionKey="id" from="${Product.list()}"
                            name="product.id" value="${jobItemInstance?.product?.id}"
                            noSelection="['':'-'+message(code:'jobitem.select.noselect')+'-']"
                            onchange="${remoteFunction(controller:'product', action:'getPriceById', onSuccess:'updatePrice(e)', params:'\'id=\' + $(\'product.id\').value')}"
                    />--}%
                        <input type="hidden" name="product.id" id="productId"/>
                        <div id="selectedProduct">

                        </div>
                        <div>
                            <g:render template="productTreeView" model="[roots:productRoots]"/>
                            <script type="text/javascript">
                                jQuery(function() {
                                    jQuery(".folder a").attr("href", "#");
                                    jQuery(".file a").attr("href", "#");
                                    jQuery(".file a").click(function() {
                                        jQuery('#selectedProduct')[0].innerHTML = this.innerHTML;
                                        jQuery('#productId')[0].value = this.id;
                                        jQuery.ajax({type:'POST',
                                            url:'/PhotoShop/product/getPriceById/' + this.id,
                                            success:function(data, textStatus) {
                                                updatePrice(data);
                                            },
                                            error:function(XMLHttpRequest, textStatus, errorThrown) {
                                            }});
                                    });

                                });

                            </script>
                        </div>
                    </g:if>
                    <g:if test="${jobItemInstance.id != null}">
                        <input type="hidden" id="product.id" name="product.id" value="${jobItemInstance?.product?.id}"/>
                        ${jobItemInstance?.product}
                    </g:if>
                </td>
            </tr>

            <tr class="prop">
                <td valign="top" class="name">
                    <label for="quantity"><g:message code="jobitem.table.quantity"/>:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: jobItemInstance, field: 'quantity', 'errors')}">
                    <input type="text" id="quantity" name="quantity" value="${fieldValue(bean: jobItemInstance, field: 'quantity')}"
                            onchange="calculateValue();"/>
                </td>
            </tr>

            <tr class="prop">
                <td valign="top" class="name">
                    <label for="staff"><g:message code="jobitem.table.staff"/>:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: jobItemInstance, field: 'staff', 'errors')}">
                    <g:select optionKey="id" from="${Staff.list()}" name="staff.id" value="${jobItemInstance?.staff?.id}"></g:select>
                </td>
            </tr>

            <tr class="prop">
                <td valign="top" class="name">
                    <label for="status"><g:message code="jobitem.table.status"/>:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: jobItemInstance, field: 'status', 'errors')}">
                    <g:select name="status" value="${jobItemInstance.status}" from="${Constants.JOB_STATUS_LIST}"/>
                    %{--<input type="text" id="status" name="status" value="${fieldValue(bean: jobItemInstance, field: 'status')}"/>--}%
                </td>
            </tr>

            <tr class="prop">
                <td valign="top" class="name">
                    <label for="value"><g:message code="jobitem.table.value"/>:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: jobItemInstance, field: 'value', 'errors')}">
                    <input type="text" id="value" name="value" value="${fieldValue(bean: jobItemInstance, field: 'value')}"/>
                </td>
            </tr>

            </tbody>
        </table>
    </div>
    <div class="buttons">
        <g:if test="${jobItemInstance.id == null}">
            <span class="button"><input class="save" type="submit" value="${message(code: 'common.button.save')}"/></span>
        </g:if>
        <g:if test="${jobItemInstance.id != null}">
            <input type="hidden" name="id" value="${jobItemInstance?.id}"/>
            <span class="button"><g:actionSubmit class="save" action="update" value="${message(code: 'common.button.edit')}"/></span>
            <span class="button"><g:actionSubmit class="delete" onclick="return confirm('${message(code:'common.delete.confirm')}');" value="Delete"/></span>
        </g:if>
    </div>
</g:form>
<g:javascript library="prototype"/>
<script type="text/javascript">
    function updatePrice(data) {
        $('price').value = data;
        calculateValue();
    }

    function calculateValue() {
        var price = parseFloat($('price').value);
        var quantity = parseFloat($('quantity').value);
        $('value').value = Math.round(price * quantity * 100) / 100;
    }
    /*$('product.id').onchange = Ajax.Updater(
     'price',
     '/PhotoShop/product/getPriceById/' + $('product.id').value,
     {asynchronous:true,evalScripts:true}
     );*/
</script>